<template>
  <van-card :thumb="foodList.pic" class="shops" style="background: white">
    <template #desc>
      <p class="title">{{ foodList.title }}</p>
      <p>
        <van-tag size="medium" color="#f7f6e1" text-color="orange">
          <van-icon />
          门店销量第一名
          <van-icon name="arrow" />
        </van-tag>
      </p>
      <p>门店销售 300+</p>
    </template>
    <template #num>

        <van-button
          icon="plus"
          size="mini"
          v-if="foodList.add && showAdd"
          round
          @click="addClick(foodList.id)"
        >
        </van-button>
        <van-stepper
          v-else
          v-model="foodList.num"
          theme="round"
          min="0"
          button-size="24"
          disable-input
          @click="movePoint"
          @change="onChange"
          @plus="onPlus"
          @minus="onMinus"
        />

    </template>
    <template #price>
      <p class="price">￥{{ foodList.price }}</p>
    </template>
  </van-card>
</template>

<script>
import { onMounted, ref } from "vue";
export default {
  props: [
    "showAdd",
    "handleAddCart",
    "addClick",
    "onChange",
    "foodList",
    "addPoint",
  ],
  setup(props) {
    let isMove = ref(false);
    const movePoint = (e) => {
      if (isMove.value) {
        props.addPoint(e);
      }
    };
    const onPlus = () => {
      isMove.value = true;
      props.handleAddCart();
    };
    const onMinus = () => {
      isMove.value = false;
    };
    return {
      movePoint,
      onPlus,
      onMinus,
    };
  },
};
</script>

<style lang="less" scoped>
.price {
  padding: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
</style>